<template>
    <!-- vue3页面 -->
    
    <div>
        <h1 style="margin-bottom:50px"></h1>
        {{ss}}

        <el-button @click="getData">取值</el-button>
        <el-button @click="getImg">图片</el-button>

        <el-tree :data="syd" :ref="treeRef" id="tree" :props="defaultProps"></el-tree>

        
    
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'

import html2canvas from 'html2canvas';

export default defineComponent({
    node_type: 'twoTwo',
    setup() {
        const syd = reactive([
           
            {
                node_type_name:'运营中组合',
                node_type:'01',
                sub_nodes:[
                    {
                        node_type_name:'2',
                        node_type:'03',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'01',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    }
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2adfa',
                        node_type:'wwwwww',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2dfsdf',
                        node_type:'wwwwwwsdff',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2sdf',
                        node_type:'wwwwwwasdf',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                ]
            },
            {
                node_type_name:'终止中组合',
                node_type:'02',
                sub_nodes:[
                    {
                        node_type_name:'2',
                        node_type:'wwwwww',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {

                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2adfa',
                        node_type:'wwwwww',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2dfsdf',
                        node_type:'wwwwwwsdff',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                    {
                        node_type_name:'2sdf',
                        node_type:'wwwwwwasdf',
                        sub_nodes:[
                            {
                                node_type_name:'3',
                                node_type:'04',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11'
                                    },
                                    {
                                        asset_name:'股票',code:'11123'
                                    },
                                    {
                                        asset_name:'股票',code:'111234'
                                    },
                                ]

                            },
                            {
                                node_type_name:'31',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11aaa'
                                    },
                                    {
                                        asset_name:'股票',code:'11123sss'
                                    },
                                    {
                                        asset_name:'股票',code:'111234ddd'
                                    },
                                ]

                            },
                            {
                                node_type_name:'32',
                                node_type:'02',
                                node_value:[
                                    {
                                        asset_name:'股票',code:'11fff'
                                    },
                                    {
                                        asset_name:'股票',code:'11123ggg'
                                    },
                                    {
                                        asset_name:'股票',code:'111234hhh'
                                    },
                                ]

                            },
                        ]
                    },
                ]
            }
            
        ])
        let ss:any = []
        
        let nameArr:any = ref([])
        const defaultProps = {
            children: 'sub_nodes',
            label: 'node_type_name'
        }
        const treeRef = ref();



		const recurrence = (data:Array<object>) => {
			for(let i in data)
			{	
				let element:any = data[i];
				if(element.node_value){
					// for(let j in element.node_value)
					// {	
					// 	nameArr.node_value.push(element.node_value[j].asset_name:'股票',code)
					// }
				}else if(element.sub_nodes)
				{
					recurrence(element.sub_nodes)
				}
			}
		}
		
		const getData = () => {
			recurrence(syd);
			console.log(nameArr.node_value,'result')
		}
        const getImg = ()=>{
            const treeElement:any = document.getElementById('tree');
            console.log(treeElement,'treeElement');
            
            html2canvas(treeElement).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = 'tree.png';
                link.href = imgData;
                link.click();
            });
        }


        const html2canvas1 = (element:any, options:any)=>{
            // 第一个参数是要截图的dom元素
            // 第二个参数是个对象
            {
                // allowTaint: 
                // background: canvas背景颜色，默认为透明
                // width: canvas宽度
                // height: canvas高度
                // letterRendering: 在设置了字间距的时候有用
                // logging: 在console.log()中输出信息
                // proxy: 代理地址
                // taintTest: 是否在渲染前测试图片
                // timeout: 图片加载延迟，默认延迟为0，单位毫秒
                // useCORS: 允许跨域
            }
        }
        

        return {
            syd,
            ss,
			recurrence,
			getData,
			nameArr,
            defaultProps,
            getImg,
            treeRef
        }
    }
})
</script>

<style scoped>

</style>